<template>
  <div class="searchResult">
    <ul class="tList">
      <template v-for="(item,index) in titleList">
        <li :key="item.id" @click="changeType(index)">
          <span :class="{'active':isIdx==index}">{{item.name}}</span>
        </li>
      </template>
    </ul>

    <!-- <comprehensive v-show="isIdx==0" :compreList="searchresultList"></comprehensive> -->
    <single v-show="isIdx==0"  :singerName="singerName"></single>
    <singervideo v-show="isIdx==1"  :singerName="singerName"></singervideo>
    <singer v-show="isIdx==2" :singerName="singerName"></singer>
    <album v-show="isIdx==3"  :singerName="singerName"></album>
    <songsheet v-show="isIdx==4"  :singerName="singerName"></songsheet>
    <anchordj v-show="isIdx==5" :singerName="singerName"></anchordj>
    <singerusers v-show="isIdx==6"  :singerName="singerName"></singerusers>

  </div>
</template>

<script>
import comprehensive from "./singerList/comprehensive.vue";
import single from "./singerList/single.vue";
import singervideo from "./singerList/singerVideo.vue";
import singer from "./singerList/singer.vue";
import album from "./singerList/album.vue";
import songsheet from "./singerList/songSheet.vue";
import anchordj from "./singerList/anchorDj.vue";
import singerusers from "./singerList/singerUsers.vue";
export default {
  components: {
    comprehensive,
    single,
    singervideo,
    singer,
    album,
    songsheet,
    anchordj,
    singerusers
  },
  props: ["singerName"],
  data() {
    return {
      titleList: [
        {
          id: 1,
          name: "单曲"
        },
        {
          id: 2,
          name: "视频"
        },
        {
          id: 3,
          name: "歌手"
        },
        {
          id: 4,
          name: "专辑"
        },
        {
          id: 5,
          name: "歌单"
        },
        {
          id: 6,
          name: "主播电台"
        },
        {
          id: 7,
          name: "用户"
        }
      ],
      isIdx: 0,
      obj:""
    };
  },
  watch: {},
  computed: {

  },
  methods: {
    changeType(index) {
      console.log(index);
      this.isIdx = index;
    }
  },
  created() {
    
  },
  mounted() {

  
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.searchResult {
  .tList {
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
    border-bottom: vw(1) solid #ccc;
    li {
      padding: vw(10) vw(15);
      display: inline-block;
      line-height: vw(20);
      text-align: center;
      font-size: vw(16);
      span {
        padding-bottom: vw(5);
      }
    }
    .active {
      color: red;
      font-weight: bold;
      border-bottom: vw(3) solid red;
    }
  }
}
</style>